<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2024-03-20 22:35:41
 * @LastEditors: Cxy
 * @LastEditTime: 2024-08-26 16:34:34
 * @FilePath: \xy-admin\play\src\views\home\commit.vue
-->
<script setup lang="ts">
import Echarts from '@/hooks/Echarts'
const props = withDefaults(
  defineProps<{
    commitDetail: any
  }>(),
  {
    commitDetail: []
  }
)
const commitRef = ref()
const { updateOption } = Echarts(commitRef, {
  title: {
    text: '贡献度',
    textStyle: {
      color: 'var(--color-text)',
      fontSize: 18
    }
  },
  tooltip: {
    formatter: (val: any) => `${val.seriesName}：${val.value[2]}<br/>时间：${val.name}-${val.value[1] + 1}`
  },
  grid: {
    show: false,
    left: 28,
    top: 40,
    bottom: 26,
    right: 10,
    tooltip: {
      show: true
    }
  },
  xAxis: {
    type: 'category',
    data: [],
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    },
    axisLabel: {
      fontSize: 10,
      margin: 4,
      align: 'center',
      formatter(val: string) {
        const data = val.split('-')
        return `${data[0]}\n${data[1]}月`
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31
    ],
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    },
    axisLabel: {
      fontSize: 10,
      margin: 12,
      align: 'center'
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  visualMap: {
    min: 0,
    max: 7,
    show: false,
    inRange: {
      color: ['#eeeeee', '#d6e685', '#8cc665', '#44a340', '#1e6823']
    }
  },
  series: {
    name: '提交次数',
    type: 'heatmap',
    data: [],
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    itemStyle: {
      borderColor: 'rgba(243, 17, 17, 1)',
      borderWidth: 0.5,
      borderType: 'dashed'
    }
  }
})

watch(
  () => props.commitDetail,
  async newVal => {
    const a = newVal.map((c: any) => c.commit.committer.date.replace(/T.*/, '').split(/-(?!.*-)/)).reverse()
    const b = a.reduce(
      (prev: any, c: any) => {
        const curData = Number(c[1]) - 1
        if (prev.dataX.includes(c[0])) {
          if (curData === prev.data.at(-1)[1]) {
            ++prev.data.at(-1)[2]
          } else {
            prev.data.push([prev.dataX.length - 1, curData, 1])
          }
        } else {
          prev.dataX.push(c[0])
          prev.data.push([prev.dataX.length - 1, curData, 1])
        }
        return prev
      },
      { data: [], dataX: [] }
    )
    await new Promise(r => setTimeout(r, 2000))
    updateOption(option => {
      option.series.data = b.data
      option.xAxis.data = b.dataX
      return option
    })
  }
)
</script>
<template>
  <el-card shadow="hover">
    <div ref="commitRef" style="width: 100%; height: 100%" />
  </el-card>
</template>
